<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../js/vue.js"></script>
</head>
<!-- 
        收集表单数据：
            1.若input正常写，则v-model收集到的是value
            2.若type="radio",则要给标签配置Value
            3.若type="checkbox"
                （1）没有配置value值，则收集到的是checked的布尔值
                （2）配置了value：
                    1）非数组，收集到的是checked的布尔值
                    2）数组，value组成的数组
            备注：v-model的修饰符：
                    lazy：失去焦点再收集数据
                    number：输入字符串转为数字
                    trim：过滤首尾输入的空格
     -->

<body>
    <div id="root">
        <form @submit.prevent="demo">
            账号：<input type="text" v-model.trim="userInfo.account"><br><br>
            密码：<input type="password" v-model="userInfo.password"><br><br>
            性别：
            男<input type="radio" name="sex" v-model="userInfo.sex" value="男">
            女<input type="radio" name="sex" v-model="userInfo.sex" value="女">
            <br><br>
            爱好：
            读书<input type="checkbox" v-model="userInfo.hobby" value="read">
            学习<input type="checkbox" v-model="userInfo.hobby" value="study">
            弹吉他<input type="checkbox" v-model="userInfo.hobby" value="guitar">
            <br><br>
            所属校区：
            <select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="xian">西安</option>
                <option value="guangzhou">广州</option>
                <option value="shenzhen">深圳</option>
            </select>
            <br><br>
            其他信息：
            <textarea v-model.lazy="userInfo.other"></textarea><br><br>
            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
            <br><br>
            <button>按钮</button>
        </form>

    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: "#root",
            data: {
                userInfo: {
                    account: '',
                    password: '',
                    sex: "",
                    hobby: [],
                    city: "",
                    other: "",
                    agree: ""
                }
            },
            methods: {
                demo() {
                    const xhr = new XMLHttpRequest();
                    xhr.open("POST", "http://127.0.0.1:8000/post-server");
                    xhr.send(JSON.stringify(this.userInfo));
                    xhr.onreadystatechange = () => {
                        if (xhr.readyState === 4) {
                            if (xhr.status >= 200 && xhr.status < 300) {
                                console.log("请求成功！");
                            } else {
                                console.log("请求失败！");
                            };
                        };
                    };
                }
            }
        })
    </script>
</body>

</html>